<template>
  <div class="navbar-bar">
    <div class="navbar-leftbar" @click="leftClick">
      <img v-if="showLeft" class="navbar-leftimage" :src="leftImageSrc" />
    </div>
    <div class="navbar-centerbar" @click="centerClick">
      <div class="navbar-title">{{title}}</div>
    </div>
    <div class="navbar-rightbar" @click="rightClick">
      <img v-if="rightImageSrc" class="navbar-rightimage" :src="rightImageSrc" />
    </div>
  </div>
</template>

<script>
  import api from "@/api/api";
  export default {
    props: {
      title: {
        type: String,
        default: "享停车"
      },

      leftImageSrc: {
        type: String,
        default: require("../assets/images/ic_back.png")
      },

      rightImageSrc: {
        type: String,
        default: null
      },

      showLeft: {
        type: Boolean,
        default: true
      },

      customLeftClick: {
        type: Boolean,
        default: false
      }
    },

    methods: {
      leftClick() {
        if (this.customLeftClick) {
          this.$emit("leftClick");
        } else {
          api.finishPage();
        }
      },

      rightClick() {
        if (this.rightImageSrc) {
          this.$emit("rightClick");
        }
      },

      centerClick() {
        if (this.title) {
          this.$emit("centerClick");
        }
      }
    }
  }
</script>

<style scoped>
.navbar-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background-color: #2c79b6;
  display: flex;
  flex-direction: row;
  align-items: center;
  /*z-index: 9999;*/
}

.navbar-leftbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 10%;
}

.navbar-leftimage {
  width: 0.4rem;
  min-width: 0.4rem;
  height: 0.4rem;
}

.navbar-centerbar {
  width: 80%;
}

.navbar-title {
  text-align: center;
  color: #fff;
  font-size: 0.39rem;
}

.navbar-rightbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 10%;
}

.navbar-rightimage {
  /* width: 0.4rem; */
  min-width: 0.4rem;
  height: 0.4rem;
}
</style>